import React, { Component } from 'react'
import Header from '../../components/Header/header'

import { Card, Empty } from 'antd-mobile'
import { reqcoupon } from '../../request/api'
import { fliterTime } from '../../filters'

import './coupon.less'

export default class coupon extends Component {
    constructor() {
        super()
        this.state = {
            coupon: [],
            n: 0
        }
        this.arr = ['未使用', '已使用', '已失效']
    }
    componentDidMount() {
        reqcoupon().then(res => {
            this.setState({
                coupon: res.data.list
            })
        })
    }
    changeN(n) {
        this.setState({
            n
        })
    }
    render() {
        let { coupon, n } = this.state;
        return (
            <div className='coupon'>
                <Header title="优惠卷" back></Header>
                <div className='nav'>
                    {this.arr.map((item, index) => {
                        return <div key={index}>
                            <span className={index == n ? 'active' : ''} onClick={() => this.changeN(index)}>{item}</span>
                        </div>
                    })}
                </div>
                {coupon.length > 0 ?
                    <div>
                        {coupon[n].content.map((i, ind) => {
                            return <Card key={i.id} title={<div className='content' >
                                <div className='money'>
                                    ￥<i>{i.money}</i>
                                    <p>满{i.limit_money}元可用</p>
                                </div>
                                <div className='desc'>
                                    <h4>{i.title}</h4>
                                    <p>{fliterTime(i.begintime)} 至 {fliterTime(i.endtime)}</p>
                                </div>
                            </div>} >
                                <p className='text'>使用规则：{i.description}</p>
                            </Card>
                        })}</div> : <Empty description='暂无数据' />}
            </div>
        )
    }
}

